<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>06_项目增长与收缩</title>
  <style>
    .container {
      width: 400px;
      background-color: lightseagreen;
      /* 弹性布局: 子元素会自动成为弹性项目 */
      /*给父容器设置弹性布局*/
      display: flex;
    }
    .item,.eg {
      width: 100px;
      height: 100px;
      background-color: lightyellow;
      border: 3px solid deeppink;
      font-size: 45px;
    }
    .eg {
      font-size: 20px;
      background-color: yellow;
    }
    .c1 {
      flex-grow: 1;
    }
    .c2 {
      flex-grow: 2;
    }
    .c3 {
      flex-grow: 3;
    }


    .c1 {
      flex-shrink: 0;
    }
    .c2 {
      flex-shrink: 1;
    }
    .c3 {
      flex-shrink: 2;
    }
  </style>
</head>
<body>
<div class="eg">参照物</div>
<div class="container">
  <div class="item c1">1</div>
  <div class="item c2">2</div>
  <div class="item c3">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>
</body>
</html>
